<template lang='pug'>
.approval_circ
    .approval_circ_title
        template(v-for='itm,idx in titles')
            .approval_itm
                .approval_itm_distinct(:style="styItmDist(idx)")
                .approval_itm_nam(:style="styItmNam(idx)") {{itm.nam}}
    .approval_circ_shape
        template(v-for='itm,idx in datas')
            .approval_shape
                .approval_shape_nam {{itm.title}}
                svgCircle3(:vals="itm.vals" :total="itm.total" :colors="colors")
</template>
<script>
import svgCircle3 from '../svgShape/svgCircle3.vue'
export default {
    components:{svgCircle3},
    props:{
        bkColor:{default:'rgba(125,125,125,0.5)'},
        color:{default:'rgb(255, 234, 152)'},
        w:{default:120},
        h:{default:120},
    },
    data(){return {
        titles:[{color:'rgb(237, 184, 10)',nam:'今日预约已审批未入园'},
            {color:'rgb(0, 178, 254)',nam:'今日预约未审批'},
            {color:'rgb(0, 235, 135)',nam:'今日预约已审批已入园'}],
        datas:[{title:'人员预约通行',inf:[0.5,0.6,0.7],total:100},
            {title:'车辆预约通行',inf:[0.5,0.6,0.7],total:100},
            {title:'货车预约通行',inf:[0.5,0.6,0.7],total:100},
            {title:'危化品预约通行',inf:[0.5,0.6,0.7],total:100}],
        colors:['rgb(237, 184, 10)','rgb(0, 178, 254)','rgb(0, 235, 135)'],
    }},
    mounted(){
       
    },
    computed:{
        
        stylesvg(){
            return {
                width:this.w+'px',
                height:this.h+'px',
                background:this.bkColor
            }
        },
        styletxt(){
            return {
                width:this.w+'px',
            }
        },
    },
    methods:{
        styItmDist(idx){
            return {
                background:this.colors[idx]
            }
        },
        styItmNam(idx){
            return {}
        }
    }
}
</script>
<style lang="scss" scoped>
.approval_circ{
    position:absolute;
    font-size: 28px;
    height: 300px;
    width: 100%;
    line-height: 40px;
    text-align: center;
    .approval_circ_title{
        display: flex;
        font-size: 16px;
        justify-content: space-around;
        .approval_itm{
            display: flex;
            height: 30px;
            line-height: 30px;
            .approval_itm_distinct{
                margin-top: 12px;
                margin-right: 5px;
            }
        }
        margin-bottom: 20px;
    }
    .approval_circ_shape{
        display: flex;
        flex-wrap: wrap;
        font-size: 18px;
        justify-content: space-around;
        .approval_shape{
            display: flex;
            width: 240px;
            margin-top: 10px;
        }
    }
}
.approval_itm_distinct{
    width:20px;
    height: 5px;
}

</style>